<template>
    <div> 
        <router-view></router-view>
        <ul class="tab">
          <li class="tab-item" :class="{active:active=='home'}" @click="handlerToTab('home')">首页</li>
          <li class="tab-item" :class="{active:active=='news'}" @click="handlerToTab('news')">新闻</li>
          <li class="tab-item" :class="{active:active=='list'}" @click="handlerToTab('list')">列表</li>
          <li class="tab-item" :class="{active:active=='mine'}" @click="handlerToTab('mine')">我的</li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return  {
            active:""
        }
    },
    watch:{
        "$route": {
            handler(route) {
                this.active = route.meta.pactive || route.name;
                console.log( this.active);
            },
            immediate:true,
            deep:true
        }
        
    },
    methods:{
        handlerToTab(name) {
            this.$router.push({
                name
            })
        }
    }
};
</script>

<style scoped lang="less">
.tab {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3.125rem;
    line-height:  3.125rem;
    background-color: black;
    color: white;
    list-style: none;
    &-item {
        flex: 1;
        text-align: center;
    }
}
.active {
    background-color: white;
    color: black;
}
</style>
